<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <title>分类修改</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="layui-form layuimini-form">
        <input type="hidden" name="id" id="id" th:value="${resourceType.id}">
        <div class="layui-form-item">
            <label class="layui-form-label required">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" th:value="${resourceType.name}" lay-verify="required" lay-reqtext="名称不能为空" placeholder="请输入名称" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">目录类型</label>
            <div class="layui-col-md3 layui-show-xs-block">
                <div id="flag" class="xm-select-demo"></div>
            </div>

            <label class="layui-form-label required">所属分类</label>
            <div class="layui-col-md4 layui-show-xs-block">
                <div id="parentId" class="xm-select-demo"></div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认修改</button>
            </div>
        </div>
    </div>

<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
<script th:src="@{/layuimini/js/lay-config.js}" charset="utf-8"></script>
<script>
    layui.use(["jquery", "form", "layer", "xmSelect"], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            xmSelect = layui.xmSelect;

        var flagData = [
            {name: "根目录", value: 0},
            {name: "子目录", value: 1}
        ]

        //类型
        var flag = xmSelect.render({
            el: '#flag',
            tips: '请选择类型',
            name: 'flag',
            radio: true,
            clickClose: true,
            model: {
                label: {
                    type: 'text',
                    text: {
                        //左边拼接的字符
                        left: '',
                        //右边拼接的字符
                        right: '',
                        //中间的分隔符
                        separator: ', ',
                    },
                }
            },
            layVerify: 'required',
            layReqText: '请选择类型',
            data: flagData,
            on: function(data){
                //arr:  当前多选已选中的数据
                var arr = data.arr

                if (arr[0].value === 1) {
                    $.post('/admin/resource-type/selectParentNames', function (res) {
                        var resourceData = res.data.resourceTypes
                        xmSelect.render({
                            el: '#parentId',
                            tips: '请选择所属分类',
                            name: 'parentId',
                            radio: true,
                            clickClose: true,
                            model: {
                                label: {
                                    type: 'text',
                                    text: {
                                        //左边拼接的字符
                                        left: '',
                                        //右边拼接的字符
                                        right: '',
                                        //中间的分隔符
                                        separator: ', ',
                                    },
                                }
                            },
                            layVerify: 'required',
                            layReqText: '请选择所属分类',
                            data: resourceData
                        })
                    })
                } else if (arr[0].value === 0) {
                    xmSelect.render({
                        el: '#parentId',
                        tips: '请选择所属分类',
                        name: 'parentId',
                        radio: true,
                        clickClose: true,
                        model: {
                            label: {
                                type: 'text',
                                text: {
                                    //左边拼接的字符
                                    left: '',
                                    //右边拼接的字符
                                    right: '',
                                    //中间的分隔符
                                    separator: ', ',
                                },
                            }
                        },
                        layVerify: 'required',
                        layReqText: '请选择所属分类',
                        data: [{name: "无", value: 0, selected: true}]
                    })
                }
            }
        })
        //回显目录类型
        var resourceTypeId = $('#id').val();
        $.get('/admin/resource-type/selectFlagChecked/' + resourceTypeId, function (res) {
            flag.setValue(res.data.resourceFlagSelect)
        })

        $.get('/admin/resource-type/selectParentNames/' + resourceTypeId, function (res) {
            var resourceData = res.data.resourceTypes
            var parent = xmSelect.render({
                el: '#parentId',
                tips: '请选择所属分类',
                name: 'parentId',
                radio: true,
                clickClose: true,
                model: {
                    label: {
                        type: 'text',
                        text: {
                            //左边拼接的字符
                            left: '',
                            //右边拼接的字符
                            right: '',
                            //中间的分隔符
                            separator: ', ',
                        },
                    }
                },
                layVerify: 'required',
                layReqText: '请选择所属分类',
                data: resourceData
            })
            //回显所属分类
            var resourceTypeId = $('#id').val();
            $.get('/admin/resource-type/selectParentIdChecked/' + resourceTypeId, function (res) {
                parent.delete(resourceData)
                parent.setValue(res.data.resourceParentIdSelect)
            })
        })

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            data = data.field

            $.post('/admin/resource-type/editResourceType', data, function (res) {
                if (res.code === 200) {
                    layer.msg(res.msg, function () {
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                        //刷新父页面
                        window.parent.location.reload();
                    })
                } else if (res.code === 444) {
                    layer.msg(res.msg)
                }
            })

            return false;
        });

    });
</script>
</body>
</html>
